<template>
  <div id="app">
    <button @click="intro">开始引导</button>
    <div class="item" data-intro="1">我是第一</div>
    <div class="item">我是第一</div>
    <div class="item">我是第一</div>
    <div class="item">我是第一</div>
    <div class="item">我是第一</div>
    <div class="item">我是第一</div>
    <div class="item">我是第二</div>
    <div class="item" data-intro="2">我是第二</div>
    <div class="item">我是第二</div>
    <div class="item">我是第二</div>
    <div class="item">我是第二</div>
    <div class="item" data-intro="3">我是第三</div>
    <div class="item">我是第二</div>
    <div class="item">我是第二</div>
    <div class="item">我是第二</div>
    <div class="item">我是第二</div>
    <div class="item">我是第二</div>
    <div class="item">我是第二</div>
    <div class="item">我是第二</div>
    <div class="item" data-intro="4">我是第四</div>
    <div class="item">我是第二</div>
  </div>
</template>

<script>
export default {
  mounted() {},
  methods: {
    intro() {
      let boo = false;
      this.$intro({
        options: {
          autoNext: true,
        },
        steps: [
          {
            step: "1",
            tip: "这里是第一步，送你去第三步",
            beforeNext(next) {
              next("3");
            },
          },
          {
            step: "2",
            tip: "<div><ul><li>this is the second step</li></ul></div>",
            afterEnter(updateTip) {
              boo = true;
              updateTip("3", "你已经走过第二步了,现在可以继续");
            },
          },
          {
            step: "3",
            tip: "我是第三步，你还没有走第二步，回到第二步",
            beforeNext(next) {
              if (boo) {
                next();
              } else {
                next("2");
              }
            },
          },
          {
            step: "4",
            tip: "我是最后一步，恭喜你完成教学",
          },
        ],
      });
    },
  },
};
</script>

<style>
#app {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: 10px;
  column-gap: 10px;
}
.item {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
}
</style>
